<script setup>

import { ref, onMounted,onUnmounted, reactive } from 'vue'

import '../assets/css/doc/docs.css';


import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';

import 'codemirror/theme/abcdef.css';
import 'codemirror/theme/eclipse.css';
import 'codemirror/theme/idea.css';
import 'codemirror/theme/night.css';
// import 'codemirror/theme/*.css'; // *.css报错。

import 'codemirror/addon/selection/active-line.js';
import "codemirror/addon/edit/matchbrackets.js";
import 'codemirror/mode/javascript/javascript.js';






var selectRef = ref(null);
var codeRef = ref(null);
var codeRef2 = ref(null);
var editor = reactive(null);
onMounted(()=>{
    initCodeMirror();
   
})

function handleContentChange(editor){
    console.log("handleContentChange",editor.getValue());
}

const initCodeMirror = function(){
    editor = CodeMirror.fromTextArea(codeRef.value, {
    lineNumbers: true,
    styleActiveLine: true,
    matchBrackets: true
    });
    var input = selectRef.value;

    // 绑定事件监听器
   // editor.on('change', handleContentChange);
    
   
    var choice = (location.hash && location.hash.slice(1)) ||
                (document.location.search &&
                    decodeURIComponent(document.location.search.slice(1)));
    if (choice) {
        input.value = choice;
        editor.setOption("theme", choice);
    }
}
const  selectTheme = function() {
        var theme = selectRef.value.options[selectRef.value.selectedIndex].textContent;
        editor.setOption("theme", theme);
        location.hash = "#" + theme;
}
CodeMirror.on(window, "hashchange", function() {
        var theme = location.hash.slice(1);
        if (theme) { selectRef.value.value = theme; selectTheme(); }
});

function extractCodeBlock(markdownText) {
  const pattern = /`{3}(\S+)?\n([\s\S]+?)\n`{3}/g;
  const matches = [];
  let match;
  while ((match = pattern.exec(markdownText)) !== null) {
    matches.push({ language: match[1] || "", code: match[2] });
  }
  return matches;
}

function test_extractCodeBlock() {
    const markdownText = `
# Hello World

这是一段文本，下面是一个代码块：

\`\`\`javascript
console.log('Hello World');
\`\`\`

下面是另一个代码块：

\`\`\`html
<div>Hello World</div>
\`\`\`
`;

const codeBlocks = extractCodeBlock(markdownText);
console.log(codeBlocks);


}

var testRef =ref(null);
var container = ref(null);
function test_extractCodeBlock2(){
    console.log(testRef.value.value);
    const codeBlocks = extractCodeBlock(testRef.value.value);
    // console.log(codeBlocks);
    // console.log(codeBlocks[0].code);
    // set
    codeRef.value.value = codeBlocks[0].code;
    console.log("codeRef.value.value",codeRef.value.value);
    // realease editor
    editor.toTextArea();

    // init editor
    // initCodeMirror();
    // codeRef2.value.value = codeBlocks[0].code;
    //  CodeMirror.fromTextArea(codeRef2.value, {
    // lineNumbers: true,
    // styleActiveLine: true,
    // matchBrackets: true
    // });


    // create textarea add to div
    // 创建 textarea 的 DOM 元素
    const textarea = document.createElement('textarea');
      textarea.value = codeBlocks[0].code;

      // 将 DOM 元素添加到指定的 DIV 中
   container.value.appendChild(textarea);
    var neweditor=  CodeMirror.fromTextArea(textarea, {
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true
        });
        // neweditor.setOption("theme", "abcdef");
}


</script>

<template>
    <div id=nav>
    <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../assets/css/doc/logo.png"></a>

    <ul>
        <li><a href="../index.html">Home</a></li>
        <li><a href="../doc/manual.html">Manual</a></li>
        <li><a href="https://github.com/codemirror/codemirror5">Code</a></li>
    </ul>
    <ul>
        <li><a class=active href="#">Theme</a></li>
    </ul>
    </div>

    <article>
    <h2>Theme Demo</h2>
    <button @click="test_extractCodeBlock2()">test_extractCodeBlock</button>
    <div ref="container">

    </div>
    <textarea ref="testRef" id="" cols="30" rows="10">
```java
        public static void main(String[] args) {
            System.out.println("Hello World");
        }
```
    </textarea>
    <!-- <textarea ref="codeRef2" id="code2" name="code2"></textarea> -->
    <form><textarea ref="codeRef" id="code" name="code">
    function findSequence(goal) {
    function find(start, history) {
        if (start == goal)
        return history;
        else if (start > goal)
        return null;
        else
        return find(start + 5, "(" + history + " + 5)") ||
                find(start * 3, "(" + history + " * 3)");
    }
    return find(1, "1");
    }</textarea></form>

    <p>Select a theme: <select ref="selectRef" @change="selectTheme()" id=select>
        <option selected>default</option>
        <option>3024-day</option>
        <option>3024-night</option>
        <option>abbott</option>
        <option>abcdef</option>
        <option>ambiance</option>
        <option>ayu-dark</option>
        <option>ayu-mirage</option>
        <option>base16-dark</option>
        <option>base16-light</option>
        <option>bespin</option>
        <option>blackboard</option>
        <option>cobalt</option>
        <option>colorforth</option>
        <option>darcula</option>
        <option>dracula</option>
        <option>duotone-dark</option>
        <option>duotone-light</option>
        <option>eclipse</option>
        <option>elegant</option>
        <option>erlang-dark</option>
        <option>gruvbox-dark</option>
        <option>hopscotch</option>
        <option>icecoder</option>
        <option>idea</option>
        <option>isotope</option>
        <option>juejin</option>
        <option>lesser-dark</option>
        <option>liquibyte</option>
        <option>lucario</option>
        <option>material</option>
        <option>material-darker</option>
        <option>material-palenight</option>
        <option>material-ocean</option>
        <option>mbo</option>
        <option>mdn-like</option>
        <option>midnight</option>
        <option>monokai</option>
        <option>moxer</option>
        <option>neat</option>
        <option>neo</option>
        <option>night</option>
        <option>nord</option>
        <option>oceanic-next</option>
        <option>panda-syntax</option>
        <option>paraiso-dark</option>
        <option>paraiso-light</option>
        <option>pastel-on-dark</option>
        <option>railscasts</option>
        <option>rubyblue</option>
        <option>seti</option>
        <option>shadowfox</option>
        <option>solarized dark</option>
        <option>solarized light</option>
        <option>the-matrix</option>
        <option>tomorrow-night-bright</option>
        <option>tomorrow-night-eighties</option>
        <option>ttcn</option>
        <option>twilight</option>
        <option>vibrant-ink</option>
        <option>xq-dark</option>
        <option>xq-light</option>
        <option>yeti</option>
        <option>yonce</option>
        <option>zenburn</option>
    </select>
    </p>
  </article>
</template>

<style  scoped>
     .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
</style>